@using Microsoft.AspNetCore.Components
@inject NavigationManager Uri
<DocMatHidden></DocMatHidden>

<p>All elements are visible unless they are explicitly hidden. To ease integration with <a href="@Uri.ToAbsoluteUri("Breakpoints").AbsoluteUri">MatBlazor responsive breakpoints</a>, this component can be used to hide any content.</p>


<h5 class="mat-h5">
    How it works
</h5>

<div>
    <img class="article-image" src="https://raw.githubusercontent.com/SamProf/MatBlazor/master/content/mat-hidden-breakpoints.png"/>
</div>


<h5 class="mat-h5">Examples</h5>

<DemoContainer>
    <Content>
        <MatHidden BreakPoint="@MatBreakpoint.XS" Direction="@MatHiddenDirection.Down">
            <div>XS Down</div>
        </MatHidden>
        <MatHidden BreakPoint="@MatBreakpoint.SM" Direction="@MatHiddenDirection.Down">
            <div>SM Down</div>
        </MatHidden>
        <MatHidden BreakPoint="@MatBreakpoint.MD" Direction="@MatHiddenDirection.Down">
            <div>MD Down</div>
        </MatHidden>
        <MatHidden BreakPoint="@MatBreakpoint.LG" Direction="@MatHiddenDirection.Down">
            <div>LG Down</div>
        </MatHidden>
        <MatHidden BreakPoint="@MatBreakpoint.XL" Direction="@MatHiddenDirection.Down">
            <div>XL Down</div>
        </MatHidden>

        <MatHidden BreakPoint="@MatBreakpoint.XS" Direction="@MatHiddenDirection.Up">
            <div>XS Up</div>
        </MatHidden>
        <MatHidden BreakPoint="@MatBreakpoint.SM" Direction="@MatHiddenDirection.Up">
            <div>SM Up</div>
        </MatHidden>
        <MatHidden BreakPoint="@MatBreakpoint.MD" Direction="@MatHiddenDirection.Up">
            <div>MD Up</div>
        </MatHidden>
        <MatHidden BreakPoint="@MatBreakpoint.LG" Direction="@MatHiddenDirection.Up">
            <div>LG Up</div>
        </MatHidden>
        <MatHidden BreakPoint="@MatBreakpoint.XL" Direction="@MatHiddenDirection.Up">
            <div>XL Up</div>
        </MatHidden>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatHidden BreakPoint=""@MatBreakpoint.XS"" Direction=""@MatHiddenDirection.Down"">
            <div>XS Down</div>
        </MatHidden>
        <MatHidden BreakPoint=""@MatBreakpoint.SM"" Direction=""@MatHiddenDirection.Down"">
            <div>SM Down</div>
        </MatHidden>
        <MatHidden BreakPoint=""@MatBreakpoint.MD"" Direction=""@MatHiddenDirection.Down"">
            <div>MD Down</div>
        </MatHidden>
        <MatHidden BreakPoint=""@MatBreakpoint.LG"" Direction=""@MatHiddenDirection.Down"">
            <div>LG Down</div>
        </MatHidden>
        <MatHidden BreakPoint=""@MatBreakpoint.XL"" Direction=""@MatHiddenDirection.Down"">
            <div>XL Down</div>
        </MatHidden>

        <MatHidden BreakPoint=""@MatBreakpoint.XS"" Direction=""@MatHiddenDirection.Up"">
            <div>XS Up</div>
        </MatHidden>
        <MatHidden BreakPoint=""@MatBreakpoint.SM"" Direction=""@MatHiddenDirection.Up"">
            <div>SM Up</div>
        </MatHidden>
        <MatHidden BreakPoint=""@MatBreakpoint.MD"" Direction=""@MatHiddenDirection.Up"">
            <div>MD Up</div>
        </MatHidden>
        <MatHidden BreakPoint=""@MatBreakpoint.LG"" Direction=""@MatHiddenDirection.Up"">
            <div>LG Up</div>
        </MatHidden>
        <MatHidden BreakPoint=""@MatBreakpoint.XL"" Direction=""@MatHiddenDirection.Up"">
            <div>XL Up</div>
        </MatHidden>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>